<template>
  <div>
    <!-- set 相关 key 操作 -->
    <el-row class="">
      <el-col :span="14">
        <el-input v-model="input.otherKeys" placeholder="另外的 KEY,多个用逗号分隔 " size="small" class="margin-bottom" />
      </el-col>
      <el-col :span="10">
        <el-button-group>
          <el-button :disabled="!!!input.otherKeys" type="plain" size="small" @click="collectionOperation('inter')">交集</el-button>
          <el-button :disabled="!!!input.otherKeys" type="plain" size="small" @click="collectionOperation('union')">并集</el-button>
          <el-button :disabled="!!!input.otherKeys" type="plain" size="small" @click="collectionOperation('diff')">差集</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!-- set 数据搜索-->
    <el-row>
      <el-col :span="11">
        <el-input
          v-model="input.keyScanParam.pattern"
          :disabled="all"
          suffix-icon="el-icon-search"
          placeholder="搜索 "
          size="mini"
          @keyup.enter.native="loadDataRequest"
        />
      </el-col>
      <el-col :span="10">
        <el-button-group>
          <el-button :disabled="all" plain size="mini" icon="el-icon-coordinate" @click="resetScanSetOrZSetKey">重置</el-button>
          <el-button plain size="mini" :disabled="scanResult.finish || all" icon="el-icon-arrow-right" @click="scanSetKeyNextPage">下一页</el-button>
        </el-button-group>

      </el-col>
    </el-row>

    <!-- 数据展示 -->
    <template v-if="data">
      <p v-for="item in data" :key="item">{{ item }}</p>
    </template>
  </div>
</template>

<script>
import redis from '@/api/redis'

export default {
  name: 'Set',
  props: {
    keyObj: {
      type: Object,
      required: true
    },
    connParam: {
      type: Object,
      required: true
    },
    serializerParam: {
      type: Object,
      required: true
    },
    all: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      input: {
        otherKeys: null,
        keyScanParam: {
          pattern: '*',
          limit: 20,
          cursor: 0
        }
      },
      scanResult: {
        cursor: 0
      },
      data: null
    }
  },
  methods: {
    getData() {
      return this.data
    },
    loadData() {
      this.loadDataRequest()
    },
    loadDataRequest() {
      redis.readData(this.connParam, this.keyObj.key, this.serializerParam,
        this.all, this.input.keyScanParam, null, null).then(res => {
        // this.data = res.data;
        this.scanResult = res.data
        this.data = res.data.members
      })
    },
    collectionOperation(op) {
      const otherKeys = this.input.otherKeys.split(',')
      const keys = [...otherKeys, this.keyObj.key].join(',')
      redis.collectionMethods(this.connParam, keys, op, this.serializerParam).then(res => {
        this.data = res.data
      })
    },
    resetScanSetOrZSetKey() {
      Object.assign(this.input.keyScanParam, { pattern: '*', cursor: '0', limit: 20 })
      this.loadDataRequest()
    },
    scanSetKeyNextPage() {
      this.input.keyScanParam.cursor = this.scanResult.cursor
      this.loadDataRequest()
    }
  }
}
</script>


